<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>相对定位与绝对定位</title>
    <style type="text/css">
    body {
        width: 960px;
        margin: 0 auto;
        font-family: 微软雅黑;
        font-size: 18px;
        line-height: 1.8em;
    }

    div {
        width: 300px;
        float: left;
    }

    .relative {
        position: relative;
        top: 150px;
    }

    .absolute {
        position: absolute;
        top: 150px;
    }

    .bg {
        background-color: rgba(100, 100, 100, .5);
    }
    </style>
</head>

<body>
    <div>
        <h2>正常信息流</h2>
        <p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
        <p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
        <p class="bg">我正忙着算账，一小时一小时在那里加叠数字。</p>
        <p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了!"</p>
        <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
    </div>
    <div>
        <h2>相对定位</h2>
        <p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
        <p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
        <p class="bg relative">我正忙着算账，一小时一小时在那里加叠数字。</p>
        <p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了!"</p>
        <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
        <code>.relative { position: relative; top:150px;}</code>
    </div>
    <div>
        <h2>绝对定位</h2>
        <p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
        <p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
        <p class="bg absolute">我正忙着算账，一小时一小时在那里加叠数字。</p>
        <p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了!"</p>
        <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
        <code>.absolute {
        position: absolute;
        top:150px;}
      </code>
    </div>
</body>

</html>
